<template>
  <div class="attributive-analysis" v-drag>
    <div class="title">
      <span>复杂关联分析</span>
      <span class="close" @click="handleClose">x</span>
    </div>
    <div ref="relevanceChart" class="relevance-chart"></div>
  </div>
</template>

<script>
export default {
  props: ["relations"],
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {
    this.addGraph();
  },
  methods: {
    handleClose() {
      this.$emit("closeRele");
    },
    getGraphData() {
      let nodes = [];
      let links = [];

      for (let item of this.relations) {
        for (let itemObj of item.data) {

          // 先查找是否已经存在node
          let source = nodes.find(function(n){
            return n.id == itemObj.source.id
          });
          if(!source){
            nodes.push({
              id: itemObj.source.id,
              name: itemObj.source.name,
              original: itemObj.source
            });
          }

          let target = nodes.find(function(n){
            return n.id == itemObj.target.id
          });
          if(!target){
            nodes.push({
              id: itemObj.target.id,
              name: itemObj.target.name,
              original: itemObj.target
            });
          }
          
          links.push({
            source: itemObj.source.id,
            target: itemObj.target.id,
            value: item.type.name,
            original: itemObj
          });
          
        }
      }
      return {
        nodes,
        links
      };
    },
    addGraph() {
      let data=this.getGraphData()

      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.relevanceChart);
      // 绘制图表
      myChart.setOption({
        series: [
          {
            type: "graph",
            layout: "force",
            force: {
              repulsion: 1000,
              edgeLength: 150,
              layoutAnimation: true
            },
            symbolSize: 70,
            nodeScaleRatio: 1, //图标大小是否随鼠标滚动而变
            roam: true, //缩放
            draggable: true, //节点是否可以拖拽
            focusNodeAdjacency: false, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
            edgeSymbol: ["circle", "arrow"], //线2头标记
            label: {
              normal: {
                show: true,
                position: "inside",
                color: "gold"
              }
            },
            edgeLabel: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 12,
                  color: "#fff"
                },
                formatter: "{c}"
              }
            },
            itemStyle: {
              normal: {
                borderColor: "#04f2a7",
                borderWidth: 2,
                shadowBlur: 10,
                shadowColor: "#04f2a7",
                color: "#001c43"
              }
            },
            lineStyle: {
              normal: {
                opacity: 0.9,
                width: 2,
                curveness: 0,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#e0f55a" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#639564" // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                }
              }
            },
            symbolKeepAspect: false,
            data: data.nodes,
            links: data.links
          }
        ]
      });
    }
  },
  created() {}
};
</script>
<style lang="less" scoped>
.attributive-analysis {
  width: 500px;
  height: 350px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  right: 100px;
  top: 100px;
  z-index: 5;
  color: #fff;
  .title {
    height: 40px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #fff;
    .close {
      cursor: pointer;
    }
  }
  .relevance-chart {
    width: 500px;
    height: 300px;
  }
}
</style>
